<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="/admin/layout/include::head('目录编辑','')"></head>
<body>
<form id="data-form" lay-filter="data-form" class="layui-form model-form">
    <input name="navId" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名</label>
        <div class="layui-input-block">
            <input name="navName" placeholder="请输入菜单名" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单地址</label>
        <div class="layui-input-block">
            <input name="navUrl" placeholder="菜单url" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单类型</label>
        <div class="layui-input-block">
            <select name="navType" lay-verify="required">
                <option value=""></option>
                <option value="1">网站菜单</option>
                <option value="2">top菜单</option>
                <option value="3">底部导航</option>

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">打开方式</label>
        <div class="layui-input-block">
            <select name="target" lay-verify="required">
                <option value=""></option>
                <option value="_self">当前窗口打开</option>
                <option value="_blank">新窗口打开</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">样式配置</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="navStyle" value="#000" placeholder="请选择颜色" class="layui-input" id="navStyle">
        </div>
        <div class="layui-input-inline" style="left: -11px;">
            <div id="colorpicker"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input name="orderNo" placeholder="排序" type="number" class="layui-input"
                   lay-verify="number"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="正常|禁用">
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
    </div>
</form>
<!-- js部分 -->
<div th:replace="/admin/layout/include::js"></div>
<script>
    layui.use(['layer', 'admin', 'form','colorpicker'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var colorpicker = layui.colorpicker;
        colorpicker.render({
            elem:'#colorpicker', //绑定元素
            color:'#000',
            done:function (color) {
                $('#navStyle').val(color);
            }
        });
        // 回显数据
        var nav = admin.getTempData('t_nav');
        if (nav) {
            form.val('data-form',{
                'navId':nav.navId,
                'navName':nav.navName,
                'navUrl':nav.navUrl,
                'navType':nav.navType,
                'target':nav.target,
                'navStyle':nav.navStyle,
                'orderNo':nav.orderNo

            });
            colorpicker.render({elem:'#colorpicker',color:nav.navStyle,done:function (color) {
                    $('#navStyle').val(color);
                }});
            console.warn(nav);
            $('#state').prop('checked',nav.state==0?"checked":"");
            form.render();
        }

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            data.field.state = data.field.state==0?'0':'1';
            // 表单提交事件
            B.post({
                url: '/admin/nav/',
                loading: true,
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        top.layer.msg(data.msg, {icon: 1});
                        admin.putTempData('formOk', true);  // 操作成功刷新表格
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        top.layer.msg(data.msg, {icon: 2});
                    }
                }
            });
            return false;
        });

    });
</script>

</body>